<template>
  <div id="detail">
    <!-- <div>{{$store.state.cartlist}}</div> -->

    <nav-bar>
      <template v-slot:NavBar_left>
        <slot>
          <div class="back" @click="backclick">
            <img src="../../assets/images/detail/返回.svg" alt="" />
          </div>
        </slot>
      </template>
      <template v-slot:NavBar_center>
        <slot>
          <div
            v-for="(item, index) in titles"
            :class="{ active: index === currentindex }"
            @click="activeclick(index)"
          >
            {{ item }}
          </div>
        </slot>
      </template>
    </nav-bar>
    <detail-swiper :topImages="topImages"></detail-swiper>
    <detail-base-info :Goods="Goods"></detail-base-info>
    <details-base-shop :Shop="Shop"></details-base-shop>
    <details-compment :Comment="Comment"></details-compment>

    <details-size :ShopSize="ShopSize"></details-size>

    <details-desc :ShopDesc="ShopDesc"></details-desc>
    <goods-list :goods="recommend"></goods-list>

    <button-back
      v-show="backbutton"
      @buttonbackclick="buttonbackclick"
    ></button-back>
    <ddata-tabar @addcart="addtocart"></ddata-tabar>
  </div>
</template>

<script>
import NavBar from "../../components/commom/navbar/NavBar.vue";
import DetailSwiper from "./childcomps/detailswiper.vue";
import DetailBaseInfo from "./childcomps/detailsbaseinfo.vue";
import DetailsBaseShop from "./childcomps/detailsbaseshop.vue";
import DetailsDesc from "./childcomps/detailsdesc.vue";
import DetailsSize from "./childcomps/detailsSize.vue";
import DetailsCompment from "./childcomps/detailsCompment.vue";
import GoodsList from "../../components/content/goods/Goodslist.vue";
import DdataTabar from "./childcomps/D-tapbar.vue";

import ButtonBack from "../Home/childcomps/buttonback.vue";

// 方法
import {
  getdetail,
  Goods,
  Shop,
  ShopDesc,
  Shopsize,
  Comment,
  getRecommend,
} from "../../network/detail";

export default {
  name: "Detail",
  components: {
    NavBar,
    DetailSwiper,
    DetailBaseInfo,
    DetailsBaseShop,
    DetailsDesc,
    DetailsSize,
    GoodsList,
    DetailsCompment,
    GoodsList,
    DdataTabar,
    ButtonBack,
  },
  data() {
    return {
      // shop_id:null,
      // item_id:null,
      iid: null,
      titles: ["商品", "参数", "评论", "推荐"],
      currentindex: 0,
      // 顶部轮播数据
      topImages: [],
      // 商品详情信息
      Goods: {},
      Shop: {},
      ShopDesc: {},
      ShopSize: {},
      Comment: {},
      recommend: [],
      backbutton: false,
    };
  },

  created() {
    document.documentElement.scrollTop = 0;
    // 1.获取iid
    this.iid = this.$route.params.iid;
    // 2.获取商品详细
    getdetail(this.iid).then((res) => {
      console.log(res);
      // 获取顶部轮播数据图片
      this.topImages = res.data.result.itemInfo.topImages;
      // 获取商品信息
      this.Goods = new Goods(
        res.data.result.itemInfo,
        res.data.result.columns,
        res.data.result.shopInfo.services
      );
      // 获取商家信息
      this.Shop = new Shop(res.data.result.shopInfo);
      // 获取商品详情信息
      this.ShopDesc = new ShopDesc(res.data.result.detailInfo);
      // 获取商品详细描述
      this.ShopSize = new Shopsize(res.data.result.itemParams);
      this.Comment = new Comment(res.data.result.rate);
    });
    // 3.获取推荐数据
    getRecommend().then((res) => {
      console.log(res);
      this.recommend = res.data.data.list;
    });
  },
  mounted() {
    this.montendstar();
  },
  beforeRouteLeave(to, from, next) {
    // deactivated()
    console.log(this.$store.state.saveY);
    console.log("statechildren:" + this.$store.state.saveY);
    console.log("路由将离开");
    next();
  },
  methods: {
    // 加入购物车
    addtocart() {
      // console.log("____________");
      const product = {};
        product.img = this.topImages[0];
        product.title = this.Goods.title;
        product.desc = this.Goods.desc
        product.prise=this.Goods.realPrice
        product.iid=this.iid
        product.name=this.Shop.name
        this.$store.dispatch('addtocart',product)
        // this.$store.commit('addtocart',product)


    },

    activeclick(index) {
      this.currentindex = index;
    },
    backclick() {
      this.$router.back();
    },
    buttonbackclick() {
      var distance = this.windowHeight;
      document.documentElement.scrollTop = distance;
    },
    montendstar() {
      let that = this;
      window.onscroll = function () {
        //变量scrollTop是滚动条滚动时，距离顶部的距离
        var scrollTop =
          document.documentElement.scrollTop || document.body.scrollTop;
        //变量windowHeight是可视区的高度
        var windowHeight =
          document.documentElement.clientHeight || document.body.clientHeight;
        //变量scrollHeight是滚动条的总高度
        var scrollHeight =
          document.documentElement.scrollHeight || document.body.scrollHeight;
        // console.log("正在监听滚动事件");
        if ((scrollTop + windowHeight).toFixed(0) <= 2000) {
          that.backbutton = false;
        } else {
          that.backbutton = true;
        }
      };
    },
  },
};
</script>

<style scoped>
.active {
  color: rebeccapurple;
}
.back {
  margin-top: 2.5vw;
}
.back img {
  width: 10vw;
  height: 10vw;
}
.details {
  padding-bottom: 20vw;
}
</style>
